<template>
	<view class="">
		<view class="data-panel" :class="searchData.direction===1?'data-panel-income':'data-panel-expend'">
			<view class="flex justify-between align-center">
				<view class="flex">
					<view 
						class="tabs-item" 
						:class="dateIndex===ix?'tabs-item-active':''"
						v-for="(im, ix) in dateTabs" 
						:key="im.value"
						@click="onDate(im,ix)"
					>
					<text>{{im.name}}</text>
					</view>
				</view>
				<view class="flex">
					<view 
						class="tabs-item" 
						:class="searchData.direction===jm.value?'tabs-item-active':''"
						v-for="(jm, jx) in dataTypes" 
						:key="jm.value"
						@click="onSwitchDate(jm)"
					>
						{{jm.name}}
					</view>
				</view>
			</view>
			<view class="flex fsize-24 mt-30">
				<view 
					class="pt-40 pb-40 shrink0 pr-10 width-220" 
					@click="$u.route('/pages/finance/statement')"
				>
					<view>实际总{{searchData.direction===1?'收入':'支出'}}</view>
					<view>
						<text class="">￥</text>
						<text class="fsize-40">{{analyse.incomeTotal}}</text>
					</view>
				</view>
				<view class="w-100 border-l pl-60">
					<view class="flex">
						<view class="w-50">
							<view>项目订单{{searchData.direction===-1?'退款':''}}</view>
							<view>{{analyse.projectOrderAmt}}</view>
						</view>
						<view class="w-50">
							<view>卡项订单{{searchData.direction===-1?'退款':''}}</view>
							<view>{{analyse.cardItemOrderAmt}}</view>
						</view>
					</view>
					<view class="flex mt-30">
						<view class="w-50">
							<view>商品订单{{searchData.direction===-1?'退款':''}}</view>
							<view>{{analyse.goodsOrderAmount}}</view>
						</view>
						<view class="w-50">
							<view>其他{{searchData.direction===1?'收入':'支出'}}</view>
							<view>{{analyse.otherAmount}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pt-20 pb-20 flex justify-evenly fweigh-600 bg-white">
			<view class="padding-20 border-radius-10 w-30 bg1">
				<view class="fsize-26">剩余卡金</view>
				<view class="line-red mt-10">{{analyse.cardItemBalance}}</view>
			</view>
			<view class="padding-20 border-radius-10 w-30 bg2">
				<view class="fsize-26">消耗卡金</view>
				<view class="line-red mt-10">{{analyse.cardItemConsume}}</view>
			</view>
			<view class="padding-20 border-radius-10 w-30 bg3">
				<view class="fsize-26">新增卡金</view>
				<view class="line-red mt-10">{{analyse.cardItemRecharge}}</view>
			</view>
		</view>
		<view>
			<view class="padding-20 flex align-center justify-between">
				<text class="line-gray">其他概况</text>
				<uni-icons
					custom-prefix="iconfont" 
					type="icon-excel" 
					size="32" 
					@click="onExcel('GetFinanceAnalyse', { date: searchData.date })" 
					color="#13227a">
				</uni-icons>
			</view>
			<view>
				<my-cell-group 
					:title="`￥${analyse.userAmountConsume}`" 
					label="用户钱包扣款" 
					icon="icon-qianbao" 
					icon-color="#f7e2e1" 
					url="/pages/finance/amountList?title=用户钱包扣款&&type=1" 
				/>
				<my-cell-group 
					:title="`￥${analyse.userAmountRecharge}`" 
					label="用户钱包存入" 
					icon="icon-shoukuan" 
					icon-color="#f7e2e1" 
					url="/pages/finance/amountList?title=用户钱包存入&&type=2" 
				/>
				<my-cell-group 
					:title="`￥${analyse.stockConsume}`" 
					label="股本扣款" 
					icon="icon-qiandai" 
					icon-color="#f7e2e1" 
					url="/pages/finance/amountList?title=股本扣款&&type=3" 
				/>
				<my-cell-group 
					:title="`￥${analyse.stockRecharge}`" 
					label="股本存入" 
					icon="icon-cunru" 
					icon-color="#f7e2e1" 
					url="/pages/finance/amountList?title=股本存入&&type=4" 
				/>
				<my-cell-group 
					:title="`￥${analyse.stockBalance}`" 
					label="未消耗总股金" 
					icon="icon-caiwuzhutifenxi" 
					icon-color="#f7e2e1" 
					url="/pages/finance/amountList?title=未消耗总股金&&type=5" 
				/>
			</view>
		</view>
		<view class="bottom-button flex justify-evenly pt-20">
			<view class="width-280">
				<u-button type="primary" size="large" icon="file-text" text="财务明细" color="#e8be58" @click="$u.route('/pages/finance/statement')"/>
			</view>
			<view class="width-280">
				<u-button type="primary" size="large" icon="edit-pen" text="添加记账" color="#e54d42" @click="$u.route('/pages/finance/bookkeeping')" />
			</view>
		</view>
		<u-calendar
			:show="showCalendar" 
			mode="range" 
			@confirm="confirmDate" 
			@close="showCalendar=false" 
			:minDate="dateDispose.minDate"
			:maxDate="dateDispose.maxDate"
			monthNum ="14"
			color="#e54d42"
			title="选择查询日期范围"
		/>
	</view>
</template>

<script>
	import myCellGroup from '@/components/my-cell-group/index.vue'
	import setDate from '@/common/date.js';
	import dwFile from '@/common/mixins/downloadFile.js'
	export default {
		components:{ myCellGroup },
		mixins:[dwFile],
		data(){
			return {
				dateIndex: 0,
				showCalendar: false,
				sdate: '',
				analyse:{
					cardItemOrderAmt: 0,
					goodsOrderAmount: 0,
					incomeTotal: 0,
					projectOrderAmt: 0,
					stockConsume: 0,
					stockRecharge: 0,
					userBalance: 0,
					userConsume: 0,
					userRecharge: 0,
				},
				dateDispose:{
					minDate:setDate.getDate(-365),
					maxDate:setDate.getDate(0)
				},
				dateTabs:[
					{name:'今天',value: `${setDate.getDate(0)} 到 ${setDate.getDate(0)}`},
					{name:'昨日',value: `${setDate.getDate(-1)} 到 ${setDate.getDate(0)}`},
					{name:'近七日',value:`${setDate.getDate(-7)} 到 ${setDate.getDate(0)}`},
					{name:'本月',value:`${setDate.getCurrentMonth().startDate} 到 ${setDate.getCurrentMonth().endDate}`},
					{name:'自定义',value:999}
				],
				searchData:{
					date: `${setDate.getDate(0)} 到 ${setDate.getDate(0)}`,
					direction: 1
				},
				dataTypes:[
					{name:'收入',value:1},
					{name:'支出',value:-1}
				]
			}
		},
		onLoad() {
			this.getDate()
			console.log(setDate.getDate(-7))
		},
		methods: {
			getDate(){
				this.$reqPost('GetFinanceAnalyse', this.searchData).then(res=>{
					this.analyse = res.data[0]
				})
			},
			confirmDate(dates){
				this.sdate = `${dates[0].slice(5)} 到 ${dates[dates.length-1].slice(5)}`
				this.dateTabs[4].name = this.sdate
				this.searchData.date = `${dates[0]} 到 ${dates[dates.length-1]}`
				this.getDate()
				this.showCalendar = false
			},
			onDate(row,index){
				if(this.dateIndex === index && this.dateIndex!==4) return
				this.dateIndex = index
				if(index === 4){
					this.showCalendar = true
				}else {
					this.dateTabs[4].name = '自定义'
					this.searchData.date = row.value
					this.getDate()
				}
			},
			onSwitchDate(obj){
				if(this.searchData.direction === obj.value) return 
				this.searchData.direction = obj.value
				this.getDate()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.data-panel{
		padding: 16px 10px;
		color:#fefff4;
		font-size: 14px;
		&-income{
			background-color: #e17572;
		}
		&-expend{
			background-color: #85bd8c;
		}
		.tabs-item{
			padding:4px 6px;
			border-radius:2px;
			&-active{
				background:rgba(255,255,255,.1);
			}
		}
	}
	.bg1{
		background: linear-gradient(225deg,#fae6e5,#f6c4c5)
	}
	.bg2{
		background: linear-gradient(225deg,#fdeed7,#f9dba9)
	}
	.bg3{
		background: linear-gradient(225deg,#e0fdfb,#b5d8f8)
	}
</style>